<template>
  <div>
    <data-table
      ref="customTable"
      :request="page"
      :search-form="searchForm"
    >
      <template slot="search">
        <el-form-item prop="title">
          <el-input v-model="searchForm.title" type="text" placeholder="名称" />
        </el-form-item>
        <el-form-item prop="appId">
          <el-input v-model="searchForm.appId" type="text" placeholder="APPID" />
        </el-form-item>
      </template>
      <template slot="function">
        <el-button v-permission="['function:wx:mp:config:add']" type="primary" icon="el-icon-plus" @click="handleAdd">新增</el-button>
      </template>
      <template slot="tableColumns">
        <el-table-column prop="id" label="ID" :show-overflow-tooltip="true" />
        <el-table-column prop="title" label="名称" />
        <el-table-column prop="appId" label="AppId" />
        <el-table-column prop="redirectUri" label="跳转地址" />
        <el-table-column prop="createTime" label="创建时间" />
        <el-table-column prop="action" label="操作">
          <template slot-scope="scope">
            <el-button-group>
              <el-button
                type="primary"
                icon="el-icon-menu"
                circle
                @click.native.prevent="setting(scope.$index, scope.row)"
              />
              <el-button
                type="primary"
                icon="el-icon-message"
                circle
                @click.native.prevent="msg(scope.$index, scope.row)"
              />
              <el-button
                type="primary"
                icon="el-icon-edit"
                circle
                @click.native.prevent="edit(scope.$index, scope.row)"
              />
              <el-button
                type="danger"
                icon="el-icon-delete"
                circle
                @click.native.prevent="remove(scope.$index, scope.row)"
              />
            </el-button-group>
          </template>
        </el-table-column>
      </template>
    </data-table>
    <el-dialog
      :title="formInitOption.title"
      :visible.sync="formInitOption.showModal"
    >
      <CustomForm
        ref="customForm"
        :action="formInitOption.action"
      />
      <div slot="footer">
        <el-button type="primary" @click="handleSubmit">保存</el-button>
        <el-button v-if="formInitOption.action === 'add'" type="danger" @click="reset">重置</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import DataTable from '@/components/datatable/data-table';
import CustomForm from '@/views/wx/mp/config/form';
import { page, remove } from '@/api/wx/mp/mp-config';

export default {
  components: {
    DataTable,
    CustomForm
  },
  data() {
    return {
      page: page,
      searchForm: {
        title: null,
        appId: null
      },
      formInitOption: {
        title: '',
        action: '',
        showModal: false
      }
    };
  },
  methods: {
    handleAdd() {
      this.formInitOption.title = '新增';
      this.formInitOption.action = 'add';
      this.formInitOption.showModal = true;
      this.reset();
    },
    edit(index, row) {
      this.formInitOption.title = '编辑';
      this.formInitOption.action = 'edit';
      this.formInitOption.showModal = true;
      this.$nextTick(() => {
        this.$refs.customForm.getInfo(row.id);
      });
    },
    remove(index, row) {
      this.$confirm('将删除【' + row.title + '】', '请确认', {
        type: 'warning'
      }).then(() => {
        remove(row.id).then(response => {
          const result = response.data;
          if (result.code === 0) {
            this.$notify({
              title: '提示',
              message: result.msg,
              type: 'success'
            });
          } else {
            this.$notify.error({
              title: result.code,
              message: result.msg
            });
          }
          this.$refs.customTable.query();
        });
      });
    },
    handleSubmit() {
      this.$refs.customForm.handleSubmit();
    },
    reset() {
      this.$nextTick(() => {
        this.$refs.customForm.reset();
      });
    },
    setting(index, row) {
      const path = '/wx/mp/menu/' + row.id;
      this.$router.replace({
        path: path
      });
    },
    msg(index, row) {
      const path = '/wx/mp/msg/' + row.appId;
      this.$router.replace({
        path: path
      });
    }
  }
};
</script>
